<template>
  <el-dialog :title="this.id?'编辑权限':'添加权限'" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
    <el-form ref="dataForm" :rules="modelRules" :model="model" label-width="130px">
      <el-form-item v-if="parentCode" label="父级编码">
        {{ parentCode }}
      </el-form-item>
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="model.name" placeholder="请输入权限名称" />
      </el-form-item>
      <el-form-item label="权限编码" prop="code">
        <el-input v-model="model.code" placeholder="请输入权限编码" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :loading="isSubmitLoading" @click="save()">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {
    getAuthorityInfoUsingGET,
    createAuthorityInfoUsingPOST,
    updateAuthorityInfoUsingPUT
  } from "@/api/permisson";

  export default {
    data() {
      return {
        dialogVisible: false,
        isSubmitLoading: false,
        id: undefined,
        parentCode: undefined,
        model: {
          id: undefined,
          name: undefined,
          code: undefined,
          parentCode: undefined
        },
        modelRules: {
          name: [{ required: true, trigger: "blur", message: "请输入权限名称" }],
          code: [{ required: true, trigger: "blur", message: "请输入权限编码" }]
        }
      };
    },
    methods: {
      show(id, parentCode) {
        this.id = id;
        this.parentCode = parentCode;
        this.resetModal();
        this.isSubmitLoading = false;
        if (id) {
          getAuthorityInfoUsingGET(id).then(result => {
            this.model = result;
            this.parentCode = result.parentCode;
            this.dialogVisible = true;
            this.$nextTick(() => {
              this.$refs["dataForm"].clearValidate();
            });
          });
        } else {
          this.dialogVisible = true;
          this.$nextTick(() => {
            this.$refs["dataForm"].clearValidate();
          });
        }
      },
      resetModal() {
        this.model = {
          id: undefined,
          name: undefined,
          code: undefined,
          parentCode: undefined
        };
      },
      save() {
        this.isSubmitLoading = true;
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            this.model.parentCode = this.parentCode
            console.log(this.model.id);
            if (this.model.id) {
              updateAuthorityInfoUsingPUT(this.model)
                .then(() => {
                  this.afterMethod();
                })
                .catch(() => {
                  this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                });
            } else {
              createAuthorityInfoUsingPOST(this.model)
                .then(() => {
                  this.afterMethod();
                })
                .catch(() => {
                  this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                });
            }
          } else {
            this.isSubmitLoading = false;
            this.$message({
              message: this.$t("formIsNotValidMessage"),
              type: "warning"
            });
          }
        });
      },
      afterMethod() {
        this.$message({
          message: this.model.id ? "编辑成功" : "添加成功",
          type: "success"
        });
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
        this.close();
        this.$emit("save");
      },
      close() {
        this.dialogVisible = false;
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
      }
    }
  };
</script>
